<template>
  <div>
    上传视频
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8080/file/upload"
      :headers="token"
      :on-success="handleVideoUpload"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    上传封面
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8080/file/upload"
      :headers="token"
      :on-success="handleCoverUpload"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="动漫名" prop="animeName">
        <el-input v-model="form.animeName" placeholder="请输入动漫名" />
      </el-form-item>
      <el-form-item label="动漫集下标" prop="animeIndex">
        <el-input v-model="form.animeIndex" placeholder="请输入动漫集下标" />
      </el-form-item>
      <el-form-item label="动漫集数" prop="animeCount">
        <el-input v-model="form.animeCount" placeholder="请输入动漫集数" />
      </el-form-item>
      <el-form-item label="动漫路径" prop="animePath">
        <el-input v-model="form.animePath" placeholder="请输入动漫路径" />
      </el-form-item>
      <!--<el-form-item label="动漫观看数" prop="animeWatchCount">-->
      <!--  <el-input v-model="form.animeWatchCount" placeholder="请输入动漫观看数" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="动漫评论数" prop="animeCommentsCount">-->
      <!--  <el-input v-model="form.animeCommentsCount" placeholder="请输入动漫评论数" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="动漫点赞数" prop="animeThumbCount">-->
      <!--  <el-input v-model="form.animeThumbCount" placeholder="请输入动漫点赞数" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="动漫收藏数" prop="animeStarCount">-->
      <!--  <el-input v-model="form.animeStarCount" placeholder="请输入动漫收藏数" />-->
      <!--</el-form-item>-->
      <el-form-item label="动漫日期" prop="animeDate">
        <el-date-picker clearable
                        v-model="form.animeDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择动漫日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="动漫类型" prop="animeType">
        <el-input v-model="form.animeType" placeholder="请输入动漫类型" />
      </el-form-item>
      <el-form-item label="动漫地区" prop="animeArea">
        <el-input v-model="form.animeArea" placeholder="请输入动漫地区" />
      </el-form-item>
      <el-form-item label="动漫封面" prop="animeCover">
        <el-input v-model="form.animeCover" placeholder="请输入动漫封面"/>
      </el-form-item>
      <!--<el-form-item label="动漫对应的视频id" prop="animeVideoid">-->
      <!--  <el-input v-model="form.animeVideoid" placeholder="请输入动漫对应的视频id" />-->
      <!--</el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { addAnime } from '@/api/anime'
import { addAndReturnVideoId } from '@/api/video'

export default {
  name: 'animeSubmission',
  data () {
    return {
      form: {
        animeName: '',
        animePath: '',
        animeAuthor: JSON.parse(localStorage.getItem('user')).userName,
        animeDate: null,
        animeWatchCount: 0,
        animeCommentsCount: 0,
        animeThumbCount: 0,
        animeStarCount: 0,
        animeVideoid: null,
        animeCover: ''
      },
      formVideo: {
        videoType: 1,
        videoWatchCount: 0,
        videoCommentsCount: 0,
        videoPath: null,
        videoName: null,
        videoAuthor: JSON.parse(localStorage.getItem('user')).userName,
        videoAuthorid: JSON.parse(localStorage.getItem('user')).userId,
        videoDate: null,
        videoIndex: null,
        videoCount: null,
        videoTime: 0,
        videoCover: ''
      },
      token: {
        Authorization: localStorage.getItem('token')
      }
    }
  },
  methods: {
    handleVideoUpload (res) {
      this.form.animeName = res.data.name
      this.form.animePath = res.data.url
      this.form.animeDate = new Date(`${new Date().getFullYear()}-01-01`)
    },
    handleCoverUpload (res) {
      this.form.animeCover = res.data.url
    },
    async submitForm () {
      // console.log(this.form)
      // return

      // 填充formVideo参数
      this.formVideo.videoIndex = this.form.animeIndex
      this.formVideo.videoName = this.form.animeName
      this.formVideo.videoDate = this.form.animeDate
      this.formVideo.videoIndex = this.form.animeIndex
      this.formVideo.videoCount = this.form.animeCount
      this.formVideo.videoPath = this.form.animePath
      this.formVideo.videoCover = this.form.animeCover
      const res = await addAndReturnVideoId(this.formVideo)

      this.form.animeVideoid = res.data.data
      await addAnime(this.form)
    }
  }
}
</script>

<style scoped lang="less">

</style>
